/*
 * @Author: silas 
 * @Date: 2021-05-12 09:52:54 
 * @Last Modified by: silas
 * @Last Modified time: 2021-06-17 17:04:24
 */
<template>
  <div class="tobBtoC">
    <!-- <div class="contentTopTitle">
            <div class="title">ICT滚投清算</div>
        </div> -->
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <el-form-item label="区域" style="width: 20%">
          <dx-cascader size="mini" :area_id.sync="form.areaId" :maxLevel="2" />
        </el-form-item>
        <el-form-item label="账期" style="width: 20%">
          <el-date-picker size="mini" v-model="form.time" type="year" placeholder="选择账期" value-format="yyyy" @change="getICTRollRemark"></el-date-picker>
        </el-form-item>
        <el-form-item style="width: 30%">
          <el-checkbox size="mini" v-model="form.rate">收入完成率</el-checkbox>
          <el-button style="margin-left: 20px" size="mini" type="primary" @click="handle_search">查询</el-button>
          <el-button size="mini" type="orange" @click="handle_export">
            导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-content clearfix">
      <div class="remark">
        <span class="attention">ICT滚动下达规则:</span>
        <span> {{remark}}</span>
      </div>
      <p class="g-unit">单位: 万元</p>
      <div class="content" style="margin-top: 0;">
        <div class="tableBox">
          <el-table id="table" v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28" border stripe ref="table">
            <el-table-column min-width="90" label="区域" prop="areaName" />
            <el-table-column min-width="80" label="年初画饼" prop="ictValue" />
            <el-table-column v-for="(it, i) in titles" :key="i" :label="it.month">
              <el-table-column v-if="form.rate" min-width="90" label="收入完成率" :prop="it.income"></el-table-column>
              <el-table-column min-width="80" label="下达金额" :prop="it.budget"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "lightEva",
  data() {
    return {
      form: {
        areaId: "",
        time: this.moment().format("yyyy"),
      },
      remark: "",
      tableData: [],
      tableLoading: false,
      titles: Array.from(
        new Array(12),
        (it, i) =>
          (it = {
            month: i + 1 + "月",
            income: "income" + i,
            budget: "budget" + i,
          })
      ),
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    async init() {
      let that = this;

      that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      that.form.areaId = that.accountInfo.areaId;
      that.getData();
      this.getICTRollRemark(this.form.time);
    },
    async getICTRollRemark(time) {
      this.remark = "";
      if (time) {
        let acctYear = this.moment(time).format("YYYY");
        let { content } = await this.fetch($budgetAPI.getICTRollRemark, {
          acctYear,
        });
        this.remark = content;
      } else {
        this.remark = "";
      }
    },
    getData() {
      var that = this;

      that.tableLoading = true;
      $budgetAPI.getIctDataList(
        {
          areaId: that.form.areaId,
          acctYear: that.form.time,
        },
        (res) => {
          that.tableData = [];
          if (res && res.code == 0) {
            res.content.map((it) => {
              it.detailList.map((item, i) => {
                it["income" + i] = item.completeYearBudget;
                it["budget" + i] = item.realGetBudget;
              });
            });
            that.tableData = res.content;
          }
          that.tableLoading = false;
        }
      );
    },
    handle_search() {
      // if(!this.form.time || !this.form.areaId) {
      // 	this.$message.error("请选择账期和版本");
      // 	return false
      // }
      this.getData();
    },
    handle_export() {
      var xlsxParam = {
        raw: true,
      }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
      let workbook = XLSX.utils.book_new();
      let ws1 = XLSX.utils.table_to_sheet(
        document.querySelector("#table"),
        xlsxParam
      );
      XLSX.utils.book_append_sheet(workbook, ws1, "ICT滚投下达");
      let wbout = XLSX.write(workbook, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      if (!this.tableData.length) {
        this.$message.error("暂无数据可导出");
        return false;
      }
      this.loading = this.$loading({
        lock: true,
        text: "正在",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream;charset=utf-8"',
          }),
          "ICT滚动下达.xlsx"
        );
        this.loading.close();
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbOut);
      }
    },
    // hanlde_version(val) {
    // 	this.form.fcDate = val;
    // 	this.getData();
    // }
  },
};
</script>

<style lang="scss" scoped>
.remark {
  padding-top: 5px;
  text-align: left;
  .attention {
    font-weight: bold;
  }
}
.table-content {
  .table-header {
    display: flex;
    justify-content: space-between;
    .table-title {
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #418ee9;
        border-radius: 1000%;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 3px;
      }
    }
  }
  .content {
    margin-top: 15px;
  }
}
</style>
